import React from 'react'
import { Col, Grid, Row, Button } from 'react-bootstrap'

import Product from './Product'
import ProductCarousel from './ProductCarousel'

const ProductList = ({products, addToCart}) => {
  const productsComponent = products.map((product) => 
        <Product product={product} addToCart={addToCart} key={product.id}>
        </Product>)

  return(
    <Col xs={8} xsOffset={2}>
      <ProductCarousel></ProductCarousel>
      <br/>
      <Row>
        {productsComponent}
      </Row>

      <Button block>加载更多</Button>
    </Col>
  )
}

export default ProductList
